Ext.define('BookmarkIt.view.folderView',{
	extend:'Ext.panel.Panel',
	alias:'widget.folderView',
	id:'folderView',
	layout:{
		type:'hbox'
	},
	width:'70%',
	style:{
		visibility:'hidden',
		'margin-left':'10px',
		'background-color':'rgb(50, 101, 156)'
	},
	autoScroll:true,
	autoShow:true,
	border:false,

	listeners:{
		afterrender:function(){
			var me = this;
			this.store = Ext.getStore('BookmarkIt.store.folderContainerStore');
			
			this.store.on('add', function(store, records, index, eOpts) {
				var title = records[0].get('title');
				var formattedTitle = Ext.String.ellipsis(title, 15, true);
				
				var tab = Ext.create('Ext.tab.Tab',{
					text:formattedTitle,
					id:records[0].get('id'),
					closable:false,
					enableToggle:true,
					width:130,
					style:{
						'visibility':'visible',
						'background-image':'none'
					},
					listeners:{
						click:function(obj){
							var store = Ext.getStore('BookmarkIt.store.localBookmarks');
							window.controller.goToFolder(obj);
							store.clearFilter();
							store.filter({filterFn : function(rec) {return parseInt(rec.get("folderId"),10) === window.controller.getCurrentFolderId();}});
						},
						'mouseover' : function(obj) {
							var store = Ext.getStore('BookmarkIt.store.localBookmarks');
							var bookmarkController = window.controller;
							
							if (bookmarkController.dragStarted) {
								bookmarkController.goToFolder(obj);
								bookmarkController.dragged.set('folderId',bookmarkController.getCurrentFolderId());
								bookmarkController.dragged.save();
							//	store.load();
								store.clearFilter();
								store.filter({filterFn : function(rec) {return parseInt(rec.get("folderId"),10) === bookmarkController.getCurrentFolderId();}});
								Ext.get(bookmarkController.dragged.get('id').toString()).setStyle('background-color','rgba(0, 0, 0, 0.1)');
								bookmarkController.v.dragData.repairXY = Ext.fly(Ext.get(bookmarkController.dragged.get('id').toString())).getXY();
							}
						}
					}
				});
				me.add(tab);
				tab.toggle();
				
			/*	var folderButton = Ext.widget('button',
						{
							text : formattedTitle,
							id : records[0].get('id'),
							toggleGroup : 'foldersGroup',
							height : 20,
							padding:3,
							style : {
								visibility : 'visible'
							},
							handler: function(obj) {
								var store = Ext.getStore('BookmarkIt.store.localBookmarks');
								window.controller.goToFolder(obj);
								store.clearFilter();
								store.filter({filterFn : function(rec) {return parseInt(rec.get("folderId"),10) === window.controller.getCurrentFolderId();}});
							},
							listeners:{
								'mouseover' : function(obj) {
									var store = Ext.getStore('BookmarkIt.store.localBookmarks');
									var bookmarkController = window.controller;
									
									if (bookmarkController.dragStarted) {
										bookmarkController.goToFolder(obj);
										bookmarkController.dragged.set('folderId',bookmarkController.getCurrentFolderId());
										bookmarkController.dragged.save();
									//	store.load();
										store.clearFilter();
										store.filter({filterFn : function(rec) {return parseInt(rec.get("folderId"),10) === bookmarkController.getCurrentFolderId();}});
										Ext.get(bookmarkController.dragged.get('id').toString()).setStyle('background-color','rgba(0, 0, 0, 0.1)');
										bookmarkController.v.dragData.repairXY = Ext.fly(Ext.get(bookmarkController.dragged.get('id').toString())).getXY();
									}

								}
							}
						});
				me.add(folderButton);
				folderButton.toggle();*/

			});

			this.store.on('remove', function(store,record, index, eOpts) {
                 me.remove(Ext.getCmp(record.get('id')));
			});
			
			var r = Ext.ModelManager.create([0,'Default Folder','', '', 0 ], 'BookmarkIt.model.Bookmark');
			this.store.add(r);
		}
	}	
});